@import "../../base.less";

@import "./_var.less";

@import "../../mixins/_index.less";

.@{prefix}-input {

  .@{prefix}-cell__title {
    width: @input-label-width;
    flex: none;
    margin-right: @spacer-4;
  }

  &-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: @input-font-size;

    &--suffix,
    &--icon {
      flex: 0 0 auto;
      margin-left: @spacer-3;
      display: table;
      color: @input-suffix-color;

      .@{prefix}-icon {
        font-size: @input-icon-font-size;
        color: @input-icon-color;
        vertical-align: middle;
        display: table-cell;
      }
    }

    &--suffix {
      position: relative;
      padding-left: 12px;

      &::after {
        .hairline-left();
      }
    }
  }

  &--control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0; // for flex-shrink in field__button
    margin: 0;
    padding: 0;
    color: @input-text-color;
    line-height: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
    font-size: inherit;

    &::placeholder {
      color: @input-placeholder-text-color;
    }

    &:disabled {
      // color: @input-disabled-text-color;
      background-color: transparent;
      cursor: not-allowed;
      opacity: 1;
      -webkit-text-fill-color: currentColor; // fix disabled color in iOS
    }

    &:read-only {
      cursor: default;
    }

    &__right {
      text-align: right;
    }
  }

  &--textarea {
    padding: @input-vertical-padding @input-horizontal-padding;

    textarea {
      display: block;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 0;
      text-align: left;
      background-color: transparent;
      border: 0;
      resize: none;
      font-size: @input-font-size;
    }

    textarea::placeholder {
      color: @text-level-3-color;
    }

    &-label {
      position: relative;
      padding: @input-vertical-padding @input-horizontal-padding;
      font-size: @input-font-size;
      color: @input-label-text-color;

      &::after {
        left: @input-horizontal-padding;
        .hairline-bottom();
      }
    }
  }

  &--count {
    text-align: right;
    height: 22px;
    font-size: 14px;
    color: @input-counter-color;
    line-height: 22px;
  }
}

.@{prefix}-input__error {
  align-items: flex-start;

  .@{prefix}-input {
    &--control {
      color: @input-error-text-color;

      &::placeholder {
        color: @input-error-text-color;
      }
    }

    &__error-msg {
      text-align: left;
      padding-top: @spacer-1;
      font-size: @input-error-msg-font-size;
      line-height: 20px;
    }
  }
}

// .@{prefix}-input__disabled {
//   color: @input-disabled-text-color;
// }
